Appearance
更新维护日志
2024-5-18
- 增加tree-select组件
2024-5-11
- 移除gis-table的按钮默认值
2024-5-7
- form提交失败 增加 关闭按钮loading操作
通过抓取handleError,调用this.$gisModalLoading(boolean,refName);实现
js
this.$gisModal({
title: "新增",
ref: "add",
width: 500,
buttons: [
{
title: "确定",
type: "primary",
close: false,
event: e => {
e.handleSubmit();
}
}
],
render: h => {
return h(dataRuleForm, {
props: {
mode: "add",
appCode: this.activeTreeNode.value
},
on: {
handleSubmit: () => {
this.$gisModalRemove("add");
this.$refs.gisTable.handleRefresh();
},
handleError:() =>{
this.$gisModalLoading(false,"add");
}
}
});
}
});
2024-4-28
- form内table增加分页
通过配置 pageConfig
js
{
type: "table", // 组件类型 必填
field: "table", // 对应字段 必填
title: "表格", // 中文标题 必填
hiddenLabel: true, // 隐藏title 必填
label: "表格", // 表格内中文标题 必填
mode: "add", // 当前表格的操作状态 必填
pageConfig:{
enable: true,
pageSize:5,
pageSize0pts: [5,20,50]
},
column: [
{
title: "input",
key: "input",
type: "input",
}
]
}
2024-4-25
- gis-form-table 校验默认非空修改为汉字提示
2024-3-28
- Gis-table的按钮增加drop下拉模式,通过配置children实现
js
{
key: "more",
title: "批量操作",
icon: "md-redo",
type: "primary",
children:[
{
key: "download",
title: "批量导入模板",
icon: "md-cloud-download",
type: "primary",
permission: "template",
},
{
key: "import",
title: "批量导入",
icon: "md-cloud-upload",
type: "primary",
permission: "import",
},
{
key: "review",
title: "批量审核",
icon: "ios-people",
type: "primary",
permission: "review",
},
{
key: "batchEdit",
title: "批量编辑",
icon: "ios-brush",
type: "primary",
permission: "batchEdit",
},
]
}
2024-1-23
el-form-table增加数据验证
需要执行npm i async-validator安装iview使用的数据校验器,使用方式与iview一致
js
{
type: "table",
field: "zcyt",
hiddenLabel: true,
label: "项目资产用途",
validate: true, //整体有没有数据的校验
value: [],
column: [
{
type: "input",
title: "面积(㎡)",
key: "mj",
minWidth: 90,
validate: [ //自定义校验,和form的保持一致
{
required: true,
message: '校验数据是否填写',
},
{
validator: (rule, value, callback, source, options) => {
if (value === 'admin') {
callback(new Error('用户名不能为admin'));
} else {
callback()
}
},
trigger: "blur"
},
{
validator: validateTwoDecimal
}
]
},
{
type: "number",
title: "套数",
key: "ts",
minWidth: 90,
validate: true //校验数据是否填写
},
],
buttons: [],
},
弹窗按钮 loading
需要手动关闭弹窗
- 不使用自定义按钮:
使用iview modal原生的footer可以:footerHide:false
js
this.$gisModal({
title: "确认更新请求",
content: "更新请求可能会造成数据更新,请谨慎操作,确认要更新请求?",
loading: true,
footerHide: false,
onOk: () => {
setTimeout(() => {
this.$gisModalRemove()
}, 2000);
},
onCancel: () => { }
});
- 自定义按钮:
在按钮上加 loading: true,buttonLoading: false,
js
this.$gisModal({
title: "确认更新请求",
content: "更新请求可能会造成数据更新,请谨慎操作,确认要更新请求?",
buttons: [
{
title: "确定",
type: "primary",
loading: true,
buttonLoading: false,
event: () => {
setTimeout(() =>{
this.$gisModalRemove()
}, 2000);
},
}
],
});
dictTree使用
js
{
title: "项目分类",
key: "xmflbm",
align: "center",
minWidth: 250,
dictTree:$SYSCONST.dictTree.xmfl,
// 不需要render
// render: (h, param) => {
// const xmflbm = param.row.xmflbm;
// if (typeof xmflbm === 'string') {
// const labels = this.getXmflLabel(xmflbm);
// return h('span', labels.join('/'));
// } else {
// return h('span', xmflbm);
// }
// },
},
table内的按钮权限配置
本身支持该功能,但需要注意最终显示效果,如果只有单个按钮,建议将权限设置在column上
js
{
title: "操作",
key: "action",
width: 98,
align: "center",
fixed: "right",
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: "error",
size: "small",
},
// 权限控制
directives: [{ name: 'has', value: "deleteOne" }],
on: {
click: () => {
this.remove(params.row);
}
}
},
"删除"
)
]);
}
}